<template>
    <div class="login-box">
        <Form class="login-form" ref="formInline" :model="formInline" :rules="ruleInline">
			<!-- <div class="login-logo">
			     <img src="../assets/login_bg.jpg">
			</div> -->
            <FormItem prop="name">
                <Input type="text" ref="usernameInput" v-model="formInline.name" placeholder="请输入用户名" size="large"
                       @on-keydown="keydown($event, 'formInline')">
                    <Icon size="20" type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="请输入密码" size="large"
                       @on-keydown="keydown($event, 'formInline')">
                    <Icon size="20" type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>

            <FormItem>
                <Button class="login-btn" type="primary" :disabled="disableBtn" size="large"
                        @click="handleSubmit('formInline')">登录
                </Button>
            </FormItem>
            <!-- <router-link to="/forget-password">忘记密码</router-link> -->
        </Form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                disableBtn: false,
                imgSrc: "",
                userKey: "",
                formInline: {
                    name: "",
                    password: ""
                },
                ruleInline: {
                    name: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {
                            type: "string",
                            min: 6,
                            message: "密码不能小于6位数",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        created() {
            //删除用户信息sessionStorage
            sessionStorage.removeItem("userInfo");
        },
        mounted() {
            this.$refs["usernameInput"].focus();
        },
        methods: {
            /***************** 监听回车键 *****************/
            keydown(e, name) {
                if (e.keyCode == 13) {
                    this.handleSubmit(name);
                }
            },
            /***************** 提交登录信息 *****************/
            handleSubmit(name) {
                //禁用提交按钮
                this.disableBtn = true;
                //校验用户名密码是否输入
                this.$refs[name].validate(valid => {
                    if (valid) {
                        //验证用户名
                        this.$http
                            .post("/parts/login/lg", this.formInline)
                            .then(res => {
                                if (res.status == 200) {
									if(res.data.code==200){
										 this.$Message.success("登录成功！请稍后...");
										setTimeout(() => {
										    sessionStorage.setItem("Authorization", JSON.stringify(res.data.data.sign));
											sessionStorage.setItem("factoryId", JSON.stringify(res.data.data.factoryId));
												sessionStorage.setItem("userName", res.data.data.userName);
										    this.$router.push("/home");
										}, 500);
									}else{
										this.$Message.error(res.data.msg);
										this.disableBtn = false;
									}
                                   
                                } else {
                                    this.$Message.error(res.msg);
                                    this.disableBtn = false;
                                }
                            })
                            .catch(error => {
                                console.dir(error);
                                this.$Message.error("系统出现错误！");
                                this.disableBtn = false;
                            });
                    } else {
                        this.disableBtn = false;
                    }
                });
            }
        }
    };
</script>
<style scoped>
    .login-box {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url(../assets/bg.jpg) no-repeat; 
        background-size: 100% 100%;
    }

    .verification-val {
        display: inline-block;
        vertical-align: middle;
        width: 199px;
        margin-right: 5px;
    }

    .verification-box {
        display: inline-block;
        vertical-align: middle;
        height: 35px;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .verification-box > img {
        width: 100%;
        height: 35px;
    }

    .login-box .login-form {
        width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        background: rgba(255, 255, 255, 0.8);
        padding: 35px 35px 15px;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 10px #000000;
    }

    .logo {
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .login-form .login-logo {
        text-align: center;
        margin-bottom: 30px;
        padding: 0 25px;
    }

    .login-form .login-logo img{
        width: 100%;
    }

    .login-btn {
        width: 100%;
    }

    .version {
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 25px;
        color: #8a8a8a;
    }
</style>
